<template>
	<div class="edit-activity-spread-img">
		<!-- 添加编辑活动推广相关图片 -->
		<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="100px">
			<el-form-item label="图片:" class="upload-box" prop="img">
				<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } "
				 multipleaccept="image/*"> <img v-if="addForm.img" :src="addForm.img" class="preview-img" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="排序:" prop="sort">
				<el-input v-model="addForm.sort" placeholder="请输入排序"></el-input>
			</el-form-item>
			<el-form-item label="状态:" prop="status">
				<el-switch v-model="addForm.status" :active-value="1" :inactive-value="2"></el-switch>
			</el-form-item>
		</el-form>
		<div style="padding-bottom: 20px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick('addForm')">确 定</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			layerid: {
				type: String,
				default: ''
			},
			type: {
				type: Number,
				default: 0
			},
			generalize_list_id: {
				type: Number,
				default: 0
			},
			generalize_id: {
				type: Number,
				default: 0
			},
			info: Object
		},
		data() {
			return {
				addForm: {
					img: '',
					status: 1,
					sort: 0,
				},
				addFormRules: {
					img: [{
						required: true,
						message: '请上传图片'
					}],
					sort: [{
						required: true,
						message: '请输入排序'
					}]
				}
			};
		},
		methods: {
			init() {
				if (this.type == 1) {
					this.addForm = this.info
				}
			},
			// 图片上传
			upload(params) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt5MB = file.size / 1024 <= 5024;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt5MB) {
					this.$message.error('图片不能大于5M');
					return;
				}

				let image = new FormData();
				image.append('file[]', file);
				this.$http(this.$ApiList.publicUpload, image).then(res => {
					this.addForm.img = res.datas[0];
				});
			},
			addFabricClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {

						// type 0 添加 1 编辑
						if (this.type == 0) {
							this.addForm.generalize_list_id = this.generalize_list_id
							this.$http(this.$ApiList.GeneralizeImgAdd, this.addForm).then(res => {
								this.$layer.msg(res.datas);
								this.$parent.init();
								this.cancel();
							});
						} else {
							this.$http(this.$ApiList.GeneralizeImgEdit, this.addForm).then(res => {
								this.$layer.msg(res.datas);
								this.$parent.init();
								this.cancel();
							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			cancel() {
				this.$layer.close(this.layerid);
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.edit-activity-spread-img {
		padding: 20px 20px;

		.el-upload,
		.preview-img {
			width: 300px;
			height: 200px;
		}

		.el-icon-plus {
			line-height: 200px;
			font-size: 60px;
		}
	}
</style>
